<html>
    <header>
        <style>
            p {
                text-align: justify;
            }
        </style>
    </header>

    <body>
        <div>
            <h3><ui-label value="i18n:many-widgets.step1"></ui-label>:</h3>
            <p><ui-label value="i18n:many-widgets.comboBoxStep1"></ui-label></p>
        </div>
        <br />
        
        <div>
            <h3><ui-label value="i18n:many-widgets.step2"></ui-label>:</h3>
            <p><ui-label value="i18n:many-widgets.comboBoxStep2"></ui-label></p>
        </div>
        <br />

        <div>
            <h3>API:</h3>
            <ui-code language="typescript">
                /*
                Set the items in the combo box.
                */
                setItems(stringArray: string[])

                /*
                Get the current text shown on the combo box.
                */
                getCurrentText()

                /*
                Set the current text shown on the combo box.
                Attention: you need to call setItems(array: string[]) to include this text into items.
                */
                setCurrentText()

                /*
                Set the sign when the combo box is open.
                */
                setOpenSign()

                /*
                Set the sign when the combo box is closed.
                */
                setClosedSign()
            </ui-code>
        </div>
        <br />

        <div>
            <h3>Bug:</h3>
            <ui-code language="typescript">
                /*
                Don't know why the items crowd together when _scrollView shows at the first time, 
                but it get normal when _scrollView hides and shows again.
        
                The solution is to first let _scrollView show and hide for one time. 
                However, this action can be noticed. You will see the blink of _scrollVien when the project starts.
                */

                private _bugFix() {
                   this.scheduleOnce(()=>{this._scrollView.active=true;}, 0.1);
                   this.scheduleOnce(()=>{this._scrollView.active=false;}, 0.2);
                }
            </ui-code>
        </div>
    </body>
</html>
